<template>
  <div class="cleanRoom_data">
    <one-title title="作业环境数据查询" @refreshData="refresh"></one-title>
    <div class="fixed_top_56">
      <div class="multiple_search">
        <div class="search_item">
          <div class="select_label">
            洁净间房号：
          </div>
          <div class="search_wrapper">
            <el-select
              v-model="roomNumberId"
              placeholder="请选择洁净间房号"
              size="small">
              <el-option
                v-for="(item,index) in cleanRoom"
                :key="index"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="search_item">
          <span class="search_label">记录日期：</span>
          <el-date-picker
            v-model="completionDate"
            type="daterange"
            size="small"
            align="right"
            :clearable=false
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            :picker-options="pickerOptions">
          </el-date-picker>
        </div>
        <div class="mes_btn">
          <el-button
            type="primary"
            icon="el-icon-search"
            class="search_btn"
            @click="init">
          </el-button>
        </div>
      </div>
      <div class="chart_box" style="display: none">
        <div ref="myChart" class="chart_wrapper"></div>
      </div>
      <div class="table_container">
        <el-table
          :data="listData.list"
          max-height="440"
          ref="mesTable"
          v-loading="isLoading"
          border
          stripe
          @sort-change="_sort"
          tooltip-effect="dark">
          <mes-col-comp
            :key="index"
            v-for="(column, index) in tableColumns"
            :column="column">
          </mes-col-comp>
        </el-table>
      </div>
      <!--分页组件-->
      <mes-pagination
        @updateData="init"
        :currentPage="listData.pageNo"
        :total="listData.count || 0"
        :pageSize="listData.pageSize">
      </mes-pagination>
    </div>
  </div>
</template>

<script>
import tableColumns from './tableColumns'

export default {
  name: 'CleanRoomData',
  data() {
    return {
      tableColumns: tableColumns, // 列配置
      isLoading: false, // 加载
      roomNumberId: '', // 洁净间房号id
      sortData: {}, // 排序对象
      recordData: [], // x轴
      completionDate: [
        this.moment(window.serverTime).subtract(1, 'months').format('YYYY-MM-DD 00:00:00'),
        this.moment(window.serverTime).format('YYYY-MM-DD 23:59:59')
      ],
      pickerOptions: this.$dateConfig.pickerOptions // 日期格式的快捷键配置项
    }
  },
  computed: {
    // 图表数据
    listData() {
      return this.$store.state.cleanRoomData.listData || []
    },
    // 洁净间房间号
    cleanRoom() {
      return this.$store.state.dict.CleanRoom.labels || [{id: ''}]
    },
  },
  mounted() {
    this.roomNumberId = this.cleanRoom[0].id
    this.init()
  },
  methods: {
    // 刷新
    refresh() {
      this.searchData = {}
      this.sortData = {}
      this.completionDate = [
        this.moment(window.serverTime).subtract(1, 'months').format('YYYY-MM-DD 00:00:00'),
        this.moment(window.serverTime).format('YYYY-MM-DD 23:59:59')
      ]
      this.$refs.mesTable.clearSort()
      this.init()
    },
    // 初始化方法
    init(page) {
      this.isLoading = true
      let postData = {
        method: 'post',
        url: 'a/cleanroomrecord/cleanRoomRecord/list',
        data: {
          pageNo: page ? page.pageNo : 1,
          pageSize: page ? page.pageSize : this.listData.pageSize || 15,
          query: {},
          sort: this.sortData,
        },
        module: 'cleanRoomData',
        state: 'listData'
      }
      if (this.roomNumberId) {
        postData.data.query.roomNumberId = this.roomNumberId
      }
      if (this.completionDate.length > 0) {
        postData.data.query.beginCreateDate = this.completionDate[0]
        postData.data.query.endCreateDate = this.completionDate[1]
      }
      this.$store.dispatch('saveData', postData).finally(() => {
        this.isLoading = false
      })
    },
    // 排序
    _sort(obj) {
      this.sortData = this.$getSortOrder(obj)
      this.init()
    }
  }
}
</script>

<style scoped lang="less">
  .cleanRoom_data {
    .chart_box {
      padding: 0 20px;
      .chart_wrapper {
        width: 100%;
        height: 500px;
        box-sizing: border-box;
        border: 1px solid #dcdfe6;
        margin-bottom: 20px;
        padding-top: 20px;
      }
    }
    .pagination{
      margin-bottom: 40px;
    }
  }
</style>
